<template>
  <div class="com-input">
    <input :type="type"
      :value="value"
      :disabled="disabled"
      :maxlength="maxlength" :placeholder="placeholder" :filter="filter"
      @blur="blurHandle"
      @keyup="keyupHandle"
      v-on="inputListeners">

    <div class="opt">
      <div class="item clean" @click="$emit('input','')" v-show="value && clean && !disabled">
        <i></i>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    model: {
      prop: 'value',
      event: 'input'
    },
    props: {
      tag: {
        type: String,
        default: 'input'
      },
      type: {
        type: String,
        default: 'text'
      },
      value: {},
      placeholder: {
        type: String,
        default: '',
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      maxlength: {
        default: false,
      },
      clean: { //是否显示清除按钮
        type: Boolean,
        default: true
      },
      decimal: { //小数点精度
        type: Number,
        default: 2,
      },
      filter: {
        default: false,
      },
      max: { // 最大值
        type: Number,
        default: -1,
      },
      min: { // 最小值
        type: Number,
        default: -1,
      },
    },
    computed:{
      inputListeners() {
        let vm = this;
        // `Object.assign` 将所有的对象合并为一个新对象
        return Object.assign({},
          // 我们从父级添加所有的监听器
          this.$listeners,
          // 然后我们添加自定义监听器，
          // 或覆写一些监听器的行为
          {
            // 这里确保组件配合 `v-model` 的工作
            input(event){
              vm.$emit('input', event.target.value)
            },
          }
        )
      }
    },
    methods: {
      keyupHandle(e) {
        if (this.filter !== 'int' && this.filter !== 'float') return false;
        //默认限制小数点后4位
        var decimal = this.decimal;
        //限制最大值，默认不限制
        var max = this.max
        var value = e.target.value;
        //safari改变值的情况光标会移到最后
        if (e.keyCode == 37 || e.keyCode == 39) return;
        if (!/^([0-9]+[\.]?)?[0-9]*$/.test(this.value)) {
          value = value.replace(/[^\d|\.]/g, '');
          //最大值判断
          if (max >= 0 && !isNaN(max) && Number(value) > Number(max)) {
            value = max;
          }
          var arr = String(value).split('.');
          for (let i = 0, len = arr.length; i < len; i++) {
            if (i > 1) break;
            if (i === 0) {
              value = '';
            }
            if (i === 0 && arr[i] === '' && arr.length > 1) {
              arr[i] = '0';
            }
            value += i == 0 ? arr[i] : arr[i].substr(0, decimal) + '';
            if (i === 0 && arr.length > 1) value += '.'
          }
        } else {
          value = value.replace(/[^\d|\.]/g, '');
          //最大值判断
          if (max >= 0 && !isNaN(max) && Number(this.value) > Number(max)) {
            value = max;
          }
          var arr = String(value).split('.');
          if (arr.length >= 2 && arr[1].length > decimal) {
            if (arr.length > 1 && arr[1].length >= 2) {
              arr[1] = arr[1].substr(0, decimal)
              value = arr.join('.');
            }
          }
        }
        this.$emit('input', value);
      },
      blurHandle(e) {
        if (this.filter !== 'int' && this.filter !== 'float') return false;
        let value = e.target.value;
        value = value.replace(/[^\d|\.]/g, '');
        //限制最大值，默认不限制
        var max = this.max;
        var min = this.min;
        //最大值判断
        if (max >= 0 && !isNaN(max) && Number(this.value) > Number(max)) {
          value = max;
        }
         //最小值验证
        if (value !== '' && min >= 0 && !isNaN(min) && Number(value) < Number(min)) {
            value = min;
        }
        //格式过滤
        var arr = String(value).split('.');
        if (arr.length >= 2 && arr[1].length == 0) {
          value = parseInt(arr[0]) === 0 ? '' : arr[0];
        }
        this.$emit('input', value)
      }
    }
  }

</script>

<style lang="less" scoped>
  .com-input {
    position: relative;
    display:flex;
    align-items: center;
    width:100%;
    height: 88px;

    input {
      // display: block;
      flex:1;
      width: 100%;
      height: 44px;
      line-height: 44px;
      -webkit-appearance: none;
      border: none;
      outline: none;
      font-size: 30px;
    }
    input:disabled {
      background-color:transparent;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
      margin: 0;
    }
    .opt {
      &,.item {
        display: flex;
        align-items: center;
        height: 100%;
      }

      .item {
        justify-content: center;
        height: 100%;
        padding: 10px;

        i {
          position: relative;
          display: block;
        }
      }
      .item+.item {
        margin-left: 10px;
      }

      .clean i {
        position: relative;
        display: block;
        width: 30px;
        height: 30px;
        background-color: #c0c3cc;
        border-radius: 50%;

        &::after,
        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 12px;
          height: 3px;
          background-color: #fff;
        }

        &::before {
          transform: translate(-50%) rotate(45deg);
        }

        &::after {
          transform: translate(-50%) rotate(-45deg);
        }
      }
    }
  }

</style>
